<template>
    <Layout class="hs-layout">

        <!-- 左侧菜单 -->
        <Sider class="hs-sider" ref="side" hide-trigger collapsible :collapsed-width="0" v-model="isCollapsed"
               :style="{zIndex: 3}">
            <div class="hs-logo">
                <!--                <img src="../../assets/image/logo.png">-->
            </div>

            <Menu ref="menu" :open-names="openNames" :active-name="activeName" theme="dark" width="auto"
                  :accordion="true">
                <!--                <MenuItem name="dashboard" to="/index/dashboard">-->
                <!--                    <Icon type="ios-navigate"></Icon>-->
                <!--                    <span>概况</span>-->
                <!--                </MenuItem>-->
                <template v-for="item in permission">
                    <template v-if="item.children">
                        <Submenu :name="item.adminPermissionId">
                            <template slot="title">
                                <Icon type="ios-navigate"></Icon>
                                <span>{{item.title}}</span>
                            </template>
                            <MenuItem :name="v.adminPermissionId" v-for="(v,i) in item.children" :key="i"
                                      :to="v.permissionUrl">
                                <span>{{v.title}}</span>
                            </MenuItem>
                        </Submenu>
                    </template>
                    <template v-else>
                        <MenuItem :name="item.adminPermissionId" :to="item.permissionUrl">
                            <Icon type="ios-navigate"></Icon>
                            <span>{{item.title}}</span>
                        </MenuItem>
                    </template>
                </template>
            </Menu>
        </Sider>

        <Layout>
            <!-- 右侧头部 -->
            <Header class="hs-header" :style="{zIndex: 2}">
                <Icon @click.native="collapsedSider" type="md-menu" size="24" :class="rotateIcon"></Icon>
                <Dropdown class="hs-avatar">
                    <div class="hs-avatar-info">
                        <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
                        <span>{{this.userInfo.username}}</span>
                    </div>
                    <DropdownMenu slot="list">
                        <DropdownItem @click.native="isShowModal = true">修改密码</DropdownItem>
                        <DropdownItem divided @click.native="confirm">退出登录</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </Header>

            <Content :style="{padding:'0 16px',zIndex: 0}">
                <!-- 右侧内容区域 -->
                <transition name="slide-fade">
                    <router-view/>
                </transition>
            </Content>

            <!-- 右侧底部 -->
            <Footer :style="{zIndex: 1}">
                <div class="hs-foot">
                    <div class="hs-version">
                        <span class="hs-version-text">花店-运营端</span>
                        <span class="hs-version-text">正式版本 1.0.5</span>
                    </div>
                    <div class="hs-copyright">Copyright © 2023 转单宝信息科技（济宁）有限公司</div>
                </div>
            </Footer>

        </Layout>

        <Modal v-model="isShowModal" title="修改密码" @on-cancel="hide('formCustom')" :mask-closable="false">

            <Form ref="formCustom" :model="params" :rules="ruleCustom" :label-width="100">
                <FormItem label="原密码" prop="password">
                    <Input type="password" v-model="params.password"></Input>
                </FormItem>
                <FormItem label="新密码" prop="newPassword">
                    <Input type="password" v-model="params.newPassword"></Input>
                </FormItem>
                <FormItem label="确认密码" prop="passwordCheck">
                    <Input type="password" v-model="params.passwordCheck"></Input>
                </FormItem>
            </Form>

            <!-- 重写对话框底部按钮 -->
            <div slot="footer">
                <Button @click="hide('formCustom')">取消</Button>
                <Button type="primary" @click="updatePassword('formCustom')" :loading="loadingBtn">
                    <span v-if="!loadingBtn">确定</span>
                    <span v-else>请稍候...</span>
                </Button>
            </div>
        </Modal>

    </Layout>
</template>

<script>
    export default {
        name: "index",
        data() {
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('新的密码不能为空'));
                } else {
                    if (this.params.passwordCheck !== '') {
                        // 对第二个密码框单独验证
                        this.$refs.formCustom.validateField('passwordCheck');
                    }
                    callback();
                }
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.params.newPassword) {
                    callback(new Error('两次密码输入的不一致!'));
                } else {
                    callback();
                }
            };
            return {
                isShowModal: false,
                loadingBtn: false,
                params:{
                    password:'',
                    newPassword:'',
                    passwordCheck:''
                },
                ruleCustom: {
                    newPassword: [
                        { required: true, validator: validatePass, trigger: 'blur' }
                    ],
                    passwordCheck: [
                        { required: true, validator: validatePassCheck, trigger: 'blur' }
                    ],
                    password: [
                        {required: true, message: '原密码不能为空', trigger: 'blur'},
                    ]
                },
                // 展开
                openNames: [],
                // 选中
                activeName: '',
                // 是否隐藏菜单栏
                isCollapsed: false,
                // 是否全屏
                fullscreen: false,
                // 权限菜单
                permission: [],
                // 当前登录用户信息
                userInfo: {
                    username: '未登录'
                }
            }
        },
        computed: {
            rotateIcon() {
                return [
                    'hs-menu-icon',
                    this.isCollapsed ? 'hs-rotate-icon' : ''
                ];
            },
        },
        created() {
            // 整理选中菜单
            this.selectMenu();
            // 用户-获取用户信息
            this.selectInformation();
            // 权限-获取当前用户权限列表
            this.myPermissionList();
        },
        methods: {
            /// 权限-获取当前用户权限列表
            myPermissionList() {
                this.$Spin.show();
                this.axios.post('/adminLogin/myPermissionList').then(res => {
                    console.log(res);
                    this.$Spin.hide();
                    if (res.status == 200) {
                        this.permission = res.data.roleList;
                        this.$nextTick(() => {
                            this.$refs.menu.updateOpened();
                            this.$refs.menu.updateActiveName();
                        })
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '获取当前用户权限列表接口报错',
                            duration: 0
                        });
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '获取当前用户权限列表接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 用户-获取用户信息
            selectInformation() {
                this.$Spin.show();
                this.axios.post('/adminMaintain/selectInformation').then(res => {
                    console.log(res);
                    this.$Spin.hide();
                    if (res.status == 200) {
                        this.userInfo = res.data;
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '获取当前用户信息接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 用户-是否确认推出登录
            confirm() {
                this.$Modal.confirm({
                    title: '是否退出登录？',
                    // content: '<p>Content of dialog</p><p>Content of dialog</p>',
                    onOk: () => {
                        // 用户-推出登录
                        this.logout();
                    },
                    onCancel: () => {
                        this.$Message.info('您点击了取消.');
                    }
                });
            },
            // 用户-推出登录
            logout() {
                this.$Spin.show();
                this.axios.post('/adminLogin/logout').then(res => {
                    console.log(res);
                    this.$Spin.hide();
                    if (res.status == 200) {
                        // 跳转登录页面
                        this.$router.replace({
                            path: '/login'
                        })
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '退出登录接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 修改密码
            updatePassword(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.loadingBtn = true;
                        this.axios.post('/adminMaintain/updatePassword', this.params).then(res => {
                            console.log(res);
                            this.loadingBtn = false;
                            if (res.status == 200) {
                                // 退出登录
                                this.logout();
                            }
                            if (res.status == 201) {
                                this.$Message.error(res.msg)
                            }
                            if (res.status == 500) {
                                this.$Notice.error({
                                    title: '服务器内部错误',
                                    desc: '修改密码接口报错',
                                    duration: 0
                                });
                            }
                        })
                    } else {
                        this.$Message.error('还有信息没有填写完整！');
                    }
                })
            },
            // 选中菜单
            selectMenu() {
                let name = this.$router.currentRoute.name;
                let arr = name.split('_');
                this.openNames = [arr[0]];
                this.activeName = name;
            },
            collapsedSider() {
                this.$refs.side.toggleCollapse();
            },
            // 关闭模态框
            hide(name) {
                this.isShowModal = false;
                this.$refs[name].resetFields();
            },
            // 全屏事件
            handleFullScreen() {
                let element = document.documentElement;
                if (this.fullscreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                this.fullscreen = !this.fullscreen;
            }
        }
    }
</script>

<style scoped lang="less">

    .hs-layout {
        height: 100vh;
        overflow: hidden;

        .hs-avatar {
            transition: all .3s;
            cursor: pointer;

            &:hover {
                background-color: #f8f8f9;
            }

            .hs-avatar-info {
                display: flex;
                padding-right: 10px;
                align-items: center;

                span {
                    margin-left: 10px;
                }

            }
        }

        .hs-menu-icon {
            cursor: pointer;
            transition: all .3s;
        }

        .hs-rotate-icon {
            transform: rotate(-90deg);
        }

        .hs-sider {
            overflow: auto;
            background-color: #191a23;
            box-shadow: 2px 0 6px rgba(0, 21, 41, .35);

            &::-webkit-scrollbar {
                width: 0px;
            }

        }


        .hs-logo {
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 100%;
                height: auto;
            }
        }

        .hs-header {
            position: sticky;
            top: 0;
            width: 100%;
            background: #fff;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 1px 4px 1px rgba(0, 0, 0, .1);
        }

        .hs-foot {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .hs-version-text {
                margin: 0 5px;
            }
        }
    }

    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .5s ease;
    }

    .slide-fade-leave-active {
        transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>